const getDate = require('./getDate')
const fillto35 = require('./fillDate')

import './calendar.css'

let vueobj = {
  template: '<ul class="calendar"><li v-for="(item,index) in arr" @click="dayClick(item)" :key="item.getTime()" :class="{thismonth:(item.getMonth()===now.getMonth()),today:(item.getFullYear()===now.getFullYear() && item.getMonth()===now.getMonth() && item.getDate()===now.getDate()),select:(item.getFullYear()===sel.getFullYear() && item.getMonth()===sel.getMonth() && item.getDate()===sel.getDate())}">{{item.getDate()}}</li></ul>',
  props: {
    year: {
      type: Number,
      require: true
    },
    month: {
      type: Number,
      require: true
    },
    firstDay: {
      type: Number,
      require: true
    }
  },
  data: function () {
    return {
      now: new Date(),
      sel: new Date(),
      arr: fillto35(getDate(this.year, this.month), this.firstDay)
    }
  },
  methods: {
    dayClick (date) {
      this.sel = date
      this.$emit('dateSelect', date)
    }
  }
}

export default vueobj
